import React from 'react';
import './time.scss'
import {getSeckilllistProList} from '../api/home'
class Countdown extends React.Component {
  constructor(props) {
    super(props);

    //开始时间
    let startTime = new Date();
    let h = startTime.getHours();
    //计算开场
    let h2 = h % 2 == 0 ? h + 2 : h + 1
    // console.log(h2);

    //结束时间
    let endTime=new Date();
    //设置倒计时结束时间
    endTime.setHours(h2);
    endTime.setMinutes(0);
    endTime.setSeconds(0);
    endTime.setMilliseconds(0);
    const time = (endTime.getTime() - startTime.getTime()) / 1000; //计算时间间隔，即毫秒数。也可以使用你

 

    this.state = {
      hours: Math.floor(time / 3600),
      minutes: Math.floor(time / 60) % 60,
      seconds: time % 60,
      time: h2,
      proList: []
    };

    this.interval = null;
  }

  componentDidMount() {
    getSeckilllistProList().then(res =>{
      this.setState({
        proList: res.data
      })
    })



    this.interval = setInterval(() => {
      const { hours, minutes, seconds } = this.state;

      // 计算剩余时间
      let remainingTime = (hours * 3600) + (minutes * 60) + seconds;

      if (remainingTime > 0) {
        remainingTime--;

        const updatedHours = Math.floor(remainingTime / 3600);
        const updatedMinutes = Math.floor(remainingTime / 60) % 60;
        const updatedSeconds = remainingTime % 60;

        this.setState({
          hours: updatedHours,
          minutes: updatedMinutes,
          seconds: updatedSeconds,
        });
      } else {
        clearInterval(this.interval);
      }
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    const { hours, minutes, seconds, time, proList } = this.state;

    return (
      <div className='time'>
       <div className='time_count'>
        
        <span>商城秒杀 {time} 点专场</span>

       {hours > 0 && (
          <p>剩余时间: {hours} 小时 {minutes} 分钟 {parseInt(seconds)} 秒</p>
        )}
        {hours === 0 && minutes > 0 && (
          <p>剩余时间: {minutes} 分钟 {parseInt(seconds)} 秒</p>
        )}
        {hours === 0 && minutes === 0 && (
          <p>剩余时间: {parseInt(seconds)} 秒</p>
        )}
        {(hours === 0 && minutes === 0 && seconds === 0) && (
          <p>倒计时结束</p>
        )}
        <span>爆款限时秒杀</span>
       </div>

       <div className='time_content'>
          {proList.length && proList.map(item => {
            return <div key={item.proid}>
              <img src={item.img1} alt="" />

            </div>
          })}
       </div>
      </div>
    );
  }
}

export default Countdown;
